<template>
  <div style="width: 100%; height: 100%" ref="elEcharts" />
</template>
<script setup lang="ts">
import { shallowRef, onMounted, watch } from 'vue'
import { useEcharts, type EChartsCoreOption } from '@/hooks/useEchart'

interface Props {
  options: EChartsCoreOption
}
const props = defineProps<Props>()
const elEcharts = shallowRef()
const currentOptions = shallowRef(props.options)
const { setOptions, initCharts, dispatchEvent } = useEcharts(elEcharts, currentOptions.value)
defineExpose({
  dispatchAction: (option: any) => dispatchEvent(option),
  setOptions: (nVal: EChartsCoreOption) => setOptions(nVal)
})
watch(
  () => props.options,
  (nVal) => {
    if (!nVal) return
    setOptions(nVal)
  }
)

onMounted(() => {
  initCharts()
})
</script>
